<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui">
    <link rel="stylesheet" type="text/css" href="lib/bootstrap3/css/bootstrap.css">
    <!--<link rel="stylesheet" type="text/css" href="lib/buttons.css">-->
    <script type="text/javascript" src="lib/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="lib/jquery.cookie.js"></script>
    <script type="text/javascript" src="lib/bootstrap3/js/bootstrap.js"></script>
    <style type="text/css">
        /*字体*/
        body {
            font-family: "Helvetica Neue", Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;
        }

        h1[id] {
            padding-top: 20px;
            margin-top: 0;
        }
        /*header*/
        .bs-docs-header,.bs-docs-masthead
        {
            position:relative;
            padding:30px 0;
            color:#cdbfe3;
            text-align:center;
            text-shadow:0 1px 0 rgba(0,0,0,.1);
            background-color:#337ab7;
            filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#563d7c', endColorstr='#6F5499', GradientType=0);
            background-repeat:repeat-x
        }
        .bs-docs-header
        {
            margin-bottom:40px;
            font-size:20px
        }
        .bs-docs-header h1
        {
            margin-top:0;
            color:#fff
        }
        .bs-docs-header p
        {
            margin-bottom:0;
            font-weight:300;
            line-height:1.4
        }
        .bs-docs-header .container
        {
            position:relative
        }
        @media (min-width:768px)
        {
            .bs-docs-header
            {
                padding-top:60px;
                padding-bottom:60px;
                font-size:24px;
                text-align:left
            }
            .bs-docs-header h1
            {
                font-size:60px;
                line-height:1
            }

        }
        @media (min-width:992px)
        {
            .bs-docs-header h1,.bs-docs-header p
            {
                margin-right:380px
            }

        }
        /*notice*/
        .notice {
            padding: 20px;
            margin: 20px 0;
            border: 1px solid #eee;
            border-left-width: 5px;
            border-radius: 3px;
        }
        .notice-success {
            border-left-color: #80D651;
        }
        .notice-info {
            border-left-color: #1b809e;
        }
        .notice-warning {
            border-left-color: #aa6708;
        }
        .notice-danger {
            border-left-color: #ce4844;
        }
        /*clickable*/
        .clickable{
            cursor: pointer;
        }
        .panel-heading span {
            margin-top: -20px;
            font-size: 15px;
        }
        /*radiongroup btn*/
        .radion-group > .btn {
            margin-right: 10px;
        }
        /*slider*/
        .bs-docs-sidebar.affix
        {
            position:static
        }
        .bs-docs-sidenav
        {
            margin-top:20px;
            margin-bottom:20px
        }
        .bs-docs-sidebar .nav>li>a
        {
            display:block;
            padding:4px 20px;
            font-size:13px;
            font-weight:500;
            color:#767676
        }
        .bs-docs-sidebar .nav>li>a:focus,.bs-docs-sidebar .nav>li>a:hover
        {
            padding-left:19px;
            color:#aa6708;
            text-decoration:none;
            background-color:transparent;
            border-left:1px solid #aa6708;
        }
        .bs-docs-sidebar .nav>.active:focus>a,.bs-docs-sidebar .nav>.active:hover>a,.bs-docs-sidebar .nav>.active>a
        {
            padding-left:18px;
            font-weight:700;
            color:#aa6708;
            background-color:transparent;
            border-left:2px solid #aa6708;
        }
        .bs-docs-sidebar .nav .nav
        {
            display:none;
            padding-bottom:10px
        }
        .bs-docs-sidebar .nav .nav>li>a
        {
            padding-top:1px;
            padding-bottom:1px;
            padding-left:30px;
            font-size:12px;
            font-weight:400
        }
        .bs-docs-sidebar .nav .nav>li>a:focus,.bs-docs-sidebar .nav .nav>li>a:hover
        {
            padding-left:29px
        }
        .bs-docs-sidebar .nav .nav>.active:focus>a,.bs-docs-sidebar .nav .nav>.active:hover>a,.bs-docs-sidebar .nav .nav>.active>a
        {
            padding-left:28px;
            font-weight:500
        }
        .back-to-top,.bs-docs-theme-toggle
        {
            display:none;
            padding:4px 10px;
            margin-top:10px;
            margin-left:10px;
            font-size:12px;
            font-weight:500;
            color:#999
        }
        .back-to-top:hover,.bs-docs-theme-toggle:hover
        {
            color:#aa6708;
            text-decoration:none
        }
        .bs-docs-theme-toggle
        {
            margin-top:0
        }
        @media (min-width:768px)
        {
            .back-to-top,.bs-docs-theme-toggle
            {
                display:block
            }

        }
        @media (min-width:992px)
        {
            .bs-docs-sidebar .nav>.active>ul
            {
                display:block
            }
            .bs-docs-sidebar.affix,.bs-docs-sidebar.affix-bottom
            {
                width:213px
            }
            .bs-docs-sidebar.affix
            {
                position:fixed;
                top:20px
            }
            .bs-docs-sidebar.affix-bottom
            {
                position:absolute
            }
            .bs-docs-sidebar.affix .bs-docs-sidenav,.bs-docs-sidebar.affix-bottom .bs-docs-sidenav
            {
                margin-top:0;
                margin-bottom:0
            }

        }
        .bs-docs-sidenav {
            margin-top: 20px;
            margin-bottom: 20px;
        }
    </style>

    <script type="text/javascript">
        /**
         *  .panel-heading click event
         */
        +function($){
            "use strict";
            $(document).on('click', '.panel-heading span.clickable', function(e){
                var $this = $(this);
                if(!$this.hasClass('panel-collapsed')) {
                    $this.parents('.panel').find('.panel-body').slideUp();
                    $this.addClass('panel-collapsed');
                    $this.find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
                } else {
                    $this.parents('.panel').find('.panel-body').slideDown();
                    $this.removeClass('panel-collapsed');
                    $this.find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
                }
            });
        }(jQuery);

        /**
         * Form
         */
        +function($) {
            "use strict";
            var JsonData = [];

            $.myPlugin = {
                setting : {
                    data:{},
                    formId:'',
                    navId:''
                },
                config:function(option){
                    $.extend(this.setting, option);
                },
                onload:function() {
                    // 递归
                    function recursive1(jsonDdta,cell) {
                        var widget = '';

                        if("children" in jsonDdta) {
                            cell++;
                            for(var i = 0; i < jsonDdta.children.length; i++) {
                                widget += recursive1(jsonDdta.children[i],cell);
                            }
                            cell--;
                        }

                        if(cell == 0) {
                            $form.data('id',jsonDdta.id);
                            $form.append(widget);

                            if($('.bs-docs-header')) {
                                $('.bs-docs-header').append('<div class="container"><h1>'+jsonDdta.text+'</h1></div>');
                            }

                        }else if(cell == 1) {

                            return '<div>'+
                                    '<h1 class="page-header" id="'+jsonDdta.id+'">'+jsonDdta.text+'</h1>'+
                                    widget+
                                    '</div>';
                        }else if(cell == 2) {

                            return '<div class="panel panel-primary" data-id="'+jsonDdta.id+'">'+
                                    '<div class="panel-heading">'+
                                    '<h3 class="panel-title" id="'+jsonDdta.id+'">'+jsonDdta.text+'</h3>'+
                                    '<span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span>'+
                                    '</div>'+
                                    '<div class="panel-body">'+
                                    widget+
                                    '</div>'+
                                    '</div>';

                        }else if(cell ==3) {

                            var taggroup = '';
                            var color = ['success','info','warning','danger','defalut','primary'];

                            if('tag' in jsonDdta) {
                                taggroup += '<div class="radion-group" data-id="'+jsonDdta.id+'">';
                                for(var i in jsonDdta.tag){

                                    taggroup += '<a class="btn btn-default notActive" data-color="'+color[i]+'" data-value="'+jsonDdta.tag[i].value+'">'+
                                    '<i class="state-icon glyphicon glyphicon-unchecked"></i>'+jsonDdta.tag[i].text+
                                    '</a>'
                                }
                                taggroup += '</div>';
                            }

                            return '<div class="notice notice-danger" data-id="'+jsonDdta.id+'">'+
                                    '<p>'+jsonDdta.text+'</p>'+
                                    taggroup+
                                    '</div>';
                        }
                    }

                    function recursive2(jsonDdta,cell) {

                        var widget = '';

                        if("children" in jsonDdta) {
                            cell++;
                            for(var i = 0; i < jsonDdta.children.length; i++) {
                                widget += recursive2(jsonDdta.children[i],cell);
                            }
                            cell--;
                        }

                        if(cell == 0) {
                            $nav.addClass('nav bs-docs-sidebar');
                            $nav.append('<ul class="nav bs-docs-sidenav">'+widget+'</ul><a class="back-to-top" href="#top">返回顶部 </a>');

                        }else if(cell == 1) {

                            return '<li class=""><a href="#'+jsonDdta.id+'">'+jsonDdta.text+'</a><ul class="nav">'+widget+'</ul></li>';
                        }else if(cell == 2) {

                            return '<li class=""><a href="#'+jsonDdta.id+'">'+jsonDdta.text+'</a></li>';

                        }
                    }

                    var $form = $(this.setting.formId);
                    var $nav = $(this.setting.navId);

                    recursive1(this.setting.data,0);
                    recursive2(this.setting.data,0);

                    var $window = $(window);
                    var $body = $(document.body);

                    $body.scrollspy({
                        target : ".bs-docs-sidebar"
                    });
                    $window.on("load", function() {
                        $body.scrollspy("refresh");
                    });

                    console.log($body);
                    setTimeout(function() {
                        var $sideBar = $(".bs-docs-sidebar");
                        $sideBar.affix({
                            offset : {
                                top : function() {
                                    var offsetTop = $sideBar.offset().top;
                                    /** @type {number} */
                                    var sideBarMargin = parseInt($sideBar.children(0).css("margin-top"), 10);
                                    //var navOuterHeight = $(".bs-docs-nav").height();
                                    return this.top = offsetTop - sideBarMargin;
                                }
                            }
                        });
                    }, 100);

                },
                bindbtn:function() {

                    $('.notice').each(function() {

                        var radiongroup = $(this).find('.radion-group');

                        radiongroup.each(function() {

                            var radionGroup = $(this);
                            var radions = radionGroup.find('a');
                            var icons = radionGroup.find('.state-icon');
                            var childID = $(this).data('id');

                            radions.each(function() {

                                var color = $(this).data('color');
                                var settings = {
                                    on: {
                                        icon: 'glyphicon glyphicon-check'
                                    },
                                    off: {
                                        icon: 'glyphicon glyphicon-unchecked'
                                    }
                                };

                                // 事件
                                $(this).on('click',function() {

                                    var value = $(this).data('value');

                                    radions.removeClass().addClass('btn btn-default notActive');
                                    $(this).removeClass('notActive').addClass('btn-'+color+' active');
                                    icons.removeClass().addClass('state-icon ' + settings.off.icon);
                                    $(this).find('.state-icon').removeClass().addClass('state-icon ' + settings.on.icon);


                                    var data = {
                                        'childID':childID,
                                        'value':value
                                    };

                                    for(var i = 0; i < JsonData.length; i++) {

                                        if(JsonData[i].childID == data.childID) {

                                            if(JsonData[i].value = data.value) {
                                                return;
                                            }else {
                                                JsonData[i].value = data.value;
                                                return;
                                            }
                                        }
                                    }

                                    JsonData.push(data);
                                    console.log(JsonData);
                                    radionGroup.find('input:hidden').prop('value',value);
                                });
                            });

                        });
                    });
                }
            };


        }(jQuery);

        $(function(){

            $.ajax({
                type: "GET",
                url: "data/item.json",
                dataType: "json",
                success: function (data) {
                    $.myPlugin.config({data:data,formId:'#form',navId:'#nav'});
                    $.myPlugin.onload();
                    $.myPlugin.bindbtn();
                }
            });

        });
    </script>
</head>
<body>
<!--header Start-->
<div class="bs-docs-header"></div>
<!--header End-->

<!--container Start-->
<div class="container">
    <div class="row">

        <!--main Start-->
        <div class="col-md-9">
            <div id="form"></div>
        </div>
        <!--main End-->

        <!--slider Start-->
        <div class="col-md-3">
            <!--<nav class="bs-docs-sidebar">-->
            <!--<ul class="nav bs-docs-sidenav">-->
            <!--<li class=""><a href="#js-overview">概览</a></li>-->
            <!--<li class=""><a href="#transitions">过渡效果</a></li>-->
            <!--<li class=""><a href="#modals">模态框</a></li>-->
            <!--</ul>-->
            <!--</nav>-->
            <nav id="nav"></nav>

            <div class="btn-group" role="group" aria-label="...">
                <button type="button" class="btn btn-default">Left</button>
                <button type="button" class="btn btn-default">Middle</button>
            </div>
        </div>
        <!--slider End-->

    </div>
</div>
<!--container End-->

<!--footer Start-->
<div class="footer"></div>
<!--footer End-->
</body>
</html>